<template>
	<div class="exgWisdomStores">
		<div class="banner">
			<h1>传统行业门店模式流量引入“难”</h1>
			<p>行业痛点：费用高、质量差、浪费大量的人力物力财力、效果没保障</p>
		</div>
		<div class="container1">
			<div class="title">e修鸽智慧门店</div>
			<p>e修鸽智慧无人店是国内家装行业首家智慧无人店，它采用了智加云智慧云眼所提供的人脸识别、大数据支持，让用户感受未来家居新体验。</p>
			<p>店内的智能刷脸机将通过人脸识别，经大数据分析出用户画像，为不同需求的用户群体打造属于他们自己的个性化标签，并为其推荐相应的家装风格，让家更懂你。而这就是来自大数据的精准营销。</p>
			<div class="slider">
				<swiper
				height="3.88rem"
				:list="imglist"
				auto
				loop
				v-model="index"
				@on-index-change="indexChange"
				></swiper>
			</div>
		</div>
		<div class="container2">
			<div class="title">AI智能家装新篇章</div>
			<p>智慧家装与人工智能，解决家装行业获客痛点</p>
			<div class="item item1">
				<span>千人千面，精准营销</span>
				<span>智能算法AI匹配</span>
			</div>
			<div class="item item2">
				<span>海量VR/工地/户型案例</span>
				<span></span>
			</div>
			<div class="item item3">
				<span></span>
				<span>云货架所见即所得</span>
			</div>
			<div class="item item4">
				<span>场景复刻智慧工地营销</span>
				<span></span>
			</div>
			<div class="item item5">
				<span>一对一业务赋能技术支持</span>
			</div>
		</div>
		<div class="container3">
			<div class="title">大数据中心</div>
			<p>我们将建立全国数据中心，通过对大数据的采集、分析和共享，实现数字化、智能化的商业模式</p>
			<img src="./img/product_zhmd_content3bg@3x.png" alt="">
		</div>
	</div>
	
</template>

<script>
	import { Swiper } from 'vux';
	const baseList = [
		{
		  img: require('./img/slider-1.jpg'),
		  title: '整体环境'
		},
		{
		  img: require('./img/slider-2.jpg'),
		  title: '智慧云眼'
		},
		{
		  img: require('./img/slider-3.jpg'), 
		  title: '客流屏',
		},
		{
		  img: require('./img/slider-4.jpg'),
		  title: '门禁屏'
		},
		{
		  img: require('./img/slider-5.jpg'), 
		  title: '迎宾屏',
		}
	]
	export default {
		name: 'exgWisdomStores',
		data(){
			return {
				imglist: baseList,
				index: 0,
			}
		},
		methods: {
			indexChange(index){
				this.index = index;
			}
		},
		components :{
			Swiper
		}
	}
</script>

<style lang="stylus" scoped>
	.exgWisdomStores{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.banner{
			width: 100%;
			height: 5rem;
			background: url('./img/product_exiug_banner@3x.png') no-repeat;
			background-size: 100% 100%; 
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			h1{
				font-size: 0.36rem;
				color: #FFFFFF;
				margin: 0.5rem 0; 
			}
			p{
				width: 62.8%;
				text-align: center;
				color: rgba(255,255,255,0.8);
				font-size: 0.24rem;
				line-height: 0.36rem;
			}
		}
		.container1{
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB;
			.title{
				font-size: 0.36rem;
				color: #333333;
				margin: 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: rgba(120,120,120.0.8);
				line-height: 0.5rem;
				margin-bottom: 0.4rem;
			}
			.slider{
				width: 92%;
				height: 3.88rem;
				margin-bottom: 0.8rem;
			}
		}
		.container2{
			width: 100%;
			height: 11.55rem;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-image: linear-gradient(0deg, #233574 0%, #0D183E 99%);
			.title{
				font-size: 0.36rem;
				color: #fff;
				margin: 0.8rem 0 0.2rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: rgba(255,255,255.0.8);
				line-height: 0.5rem;
				text-align: center;
				margin-bottom: 0.8rem;
			}
			.item{
				width: 92%;
				height: 1.2rem;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 0.5rem;
				span{
					display: block;
					height: 100%;
					font-size: 0.3rem;
					color: #fff;
					border-radius: 0.14rem;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.item1{
				span:nth-child(1){
					width: 3.65rem;
					background: #3BAEFC;
				}
				span:nth-child(2){
					width: 2.93rem;
					background: #5184F0;
				}
			}
			.item2{
				span:nth-child(1){
					width: 4.58rem;
					background: #AB61F8;
				}
				span:nth-child(2){
					width: 2.02rem;
					background: rgba(171,97,248,0.32);
				}
			}
			.item3{
				span:nth-child(1){
					width: 2.02rem;
					background: rgba(78,164,131,0.32);
				}
				span:nth-child(2){
					width: 4.55rem;
					background: #4EA483;
				}
			}
			.item4{
				span:nth-child(1){
					width: 5.55rem;
					background: #6162F8;
				}
				span:nth-child(2){
					width: 1.05rem;
					background: rgba(97,98,248,0.32);
				}
			}
			.item5{
				span{
					width: 100%;
					background: #8347F3;
				}
			}
		}
		.container3{
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #F3F6FB; 
			.title{
				color: #333;
				font-size: 0.36rem;
				line-height: 0.5rem;
				margin: 0.5rem 0;
			}
			p{
				width: 88%;
				font-size: 0.3rem;
				color: #666;
				line-height: 0.5rem;
				text-align: center;
				margin-bottom: 0.3rem;
			}
			img{
				width: 7.5rem;
				height: 3.4rem;
			}
		}
	}
	
</style>

<style lang="stylus">
	.vux-slider > .vux-indicator, .vux-slider .vux-indicator-right {}
	.vux-slider > .vux-swiper > .vux-swiper-item > a > .vux-swiper-desc {
		height: 0.3rem !important;
    	font-size: 0.36rem !important;
    	/*color: #3C63AA !important;*/
	}
	.vux-slider > .vux-indicator > a > .vux-icon-dot.active, .vux-slider .vux-indicator-right > a > .vux-icon-dot.active {
	    background-color: #3C63AA !important;
	}
</style>